<html>
    <head>

        <script src="jquery_1_9_1.js"></script>
        <script>
            /*$(document).mousedown(function(){
             $(document).mousemove(function(e){
             var x= e.pageX;
             var y= e.pageY;
             $("#testDiv").html(x+"-"+y+"-"+e.which);
             });
             });
             $(document).mouseup(function(){
             $(document).mousemove(function(e){
             $("#testDiv").html("mouse up - "+e.which);
             });
             });
             */

            $(document).ready(function() {
                var imgElement = $("#loopSlider #itemList ul li");
                var imgWidth = imgElement.width();
                var imgHeight = imgElement.height();
                var imgCount = imgElement.size();
                var activeNumber = 5;
                $("#loopSlider #itemList").css({marginLeft: -imgWidth});
                $("#loopSlider").css({width: activeNumber*imgWidth});
                $("#loopSlider").css({height: imgWidth});
                $(".controlButton").click(function() {
                    if ($(this).attr('id') === "nextButton") {
                        $("#itemList").animate({marginLeft: "-="+imgWidth}, function() {
                            $(this).find("li:last").after($(this).find("li:first"));
                            $("#itemList").css({marginLeft: -imgWidth});
                        });
                    } else {
                        $("#itemList").animate({marginLeft: "+="+imgWidth}, function() {
                            $(this).find("li:first").before($(this).find("li:last"));
                            $("#itemList").css({marginLeft: -imgWidth});
                        });
                    }

                });
            });
        </script>
        <style type="text/css">
            #loopSlider{
                border: 1px solid #000000;
                overflow: hidden;
                position: relative;
            }
            #loopSlider #preButton{
                background-color: green;
                width: 20px;
                height: 20px;
                top: 50%;
                left: 5%;
                position: absolute;
                z-index: 2;
            }
            #loopSlider #nextButton{
                background-color: green;
                width: 20px;
                height: 20px;
                top: 50%;
                right: 5%;
                position: absolute;
                z-index: 2;
            }
            #loopSlider #itemList li{
                float: left;
                background-color: red;
                width: 200px;
                height: 200px;
                
            }
            #loopSlider #itemList ul{
                list-style-type: none;
                margin-top: -16px;
                margin-left: -40px;
            }
            #loopSlider #itemList{
                width: 9999px;
            }


        </style>
    </head>


    <body>


        <div id="loopSlider">
            <div class="controlButton" id="nextButton">&nbsp;</div>
            <div id="itemList">
                <ul>
                    <li>img1</li>
                    <li>img2</li>
                    <li>img3</li>
                    <li>img4</li>
                    <li>img5</li>
                    <li>img6</li>
                    <li>img7</li>
                </ul>
            </div>
            <div class="controlButton" id="preButton">&nbsp;</div>
        </div>

    </body>
</html>